
<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title>私信聊天</title>
       <link rel="stylesheet" type="text/css" href="/static/css/index.css"/>
       <script src="/static/js/jquery-3.2.1.min.js"></script>
    </head>
    <body class="chat">
       <!-- 好友列表 -->
       <div class="list">
          <span class="title">最近联系</span>
          <div class="user-list">
             <!-- 没有联系人的提示内容 -->
              <a class="no-data"><img src="/static/images/404.svg"/>暂无联系人</a >

             <!-- 联系人列表 -->
             <a class="data active" href="{% url 'xzbindex' %}"><img src="/static/images/logo.png"><em>首页</em></a >
             {% for user in users %}
             <a class="data active" href="/xzb/chats/{{user.id}}"><img src="/static/images/{{user.actorurl}}" /><em>{{user.userName}}</em></a >
             {% endfor %}
          </div>
       </div>
       <!-- 聊天窗口 -->
       <div class="content">
          <!-- 没有选择联系人的情况下，默认显示的效果 -->
          {% if not value %}
           <a class="no-data"><img src="/static/images/404.svg"/>选择联系人</a >
          {% else %}
          <div class="header clearfix">
             <span>与<b>{{user1.userName}}</b>的对话</span>
             <a class="btn">加入黑名单</a >
          </div>
          <!-- 显示聊天内容 -->
          <section class="msg">
             <!-- 聊天内容， 没有聊天内容的时候，提示  开始聊天 -->
<!--              <a class="no-data">无聊天内容，开始聊天</a >-->
              {% for pl in plist %}
                {% if pl.Userid == user1.id %}
             <div class="f">
                <div class="info">
                   <img src="/static/images/{{user1.actorurl}}" />
                   <time>{{pl.Create_time}}</time>
                </div>
                <div class="text">{{pl.Message}}</div>
             </div>
              {% else %}
             <div class="clearfix">
                <div class="t">
                   <div class="info">
                      <img src="/static/images/{{user2.actorurl}}" />
                      <time>{{pl.Create_time}}</time>
                   </div>
                   <div class="text">{{pl.Message}}</div>
                </div>
             </div>
              {% endif %}
             {% endfor %}
             {% endif %}


          </section>
          <!-- 显示 发送按钮 -->
          <footer>
             <form action="/xzb/send/{{user1.id}}" id="sFrom" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <textarea id="s_con" name="message" placeholder="请输入聊天信息"></textarea>
                <a class="btn" id="s_btn">发送消息</a >
             </form>
          </footer>
       </div>
    <script>
       $(function(){
          $('#s_btn').click(function(){
          //alert(1);
          $('#sFrom').submit();
          })
       })
    </script>
    </body>
</html>
